<?php 

$page = new Page('mainPage');

$div = new Div();
$div->addAttribute(new ClassAttribute('content'));

$form = new Form('rendering', 'loginForm');

$username = new TextField('username', 'Username:');
//$username->addAttribute(new ClassAttribute('required'));
$username->addAttribute(new ClassAttribute('formElement'));
//$username->setInlineLabel(Label::$labelInline);
$form->addElement($username);

$password = new TextField('password', 'Password:');
//$password->addAttribute(new ClassAttribute('required'));
$password->addAttribute(new ClassAttribute('formElement'));
//$password->setInlineLabel(Label::$labelInline);
$form->addElement($password);
$form->addElement(new FormButton('Login', 'Login', FormButtonType::$submit));

$div->addElement(new Heading('Login'));
$div->addElement($form);

$page->addElement(new Header(new Heading('Validation')));
$page->addElement($div);

?>


<!DOCTYPE html>
<html>
<head>
<title>Validation</title>

<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 

 -->
 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script type="text/javascript" src="files/vendor/jquery/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="files/vendor/jquery/jquery.mobile-1.0.min.js"></script>
<script type="text/javascript" src="files/vendor/jquery/jquery.validate.min.js"></script>
<style type="text/css">
.content
{
	margin: auto;
	width: 40%;
}
.formElement
{
	border-top:50;
}
</style>
<script>
  $(document).ready(function(){
    $("#loginForm").validate();
  });
  </script>
</head>
<body>
<?php
	$page->render();
?>
</body>
</html>